<template>
	<view class="content">
		<image class="bg" :src="base + info.stadiumImg"></image>
		<div class="container">
			<div class="flexB">
				<div></div>
				<div class="bb flex ac" @click="viewImg(imgList, 0)">
					<uni-icons style="vertical-align: middle;" type="image-filled" color="#fff" size="20"></uni-icons>
					<span class="ff">相册{{ imgList.length }}></span>
				</div>
			</div>
			<div class="ibox mb10">
				<div class="mb10 f18">{{ info.stadiumName }}</div>
				<div class="flexB mb10">
					<div>
						<uni-tag size="mini" style="margin-right: 4px;" v-for="i in tags" :key="i" :inverted="true" :text="i" />
					</div>
					<div class="theme f12" @click="viewItem">
						详情/设施>
					</div>
				</div>
				<div class="flexB">
					<div class="ll1">
						<div class="flex ac">
							<span>{{ info.stadiumName }}</span>
							<!-- <span class="pf">{{ info.rating || 0 }}</span> -->
							<!-- <span>{{ info.ratingCount }}条</span> -->
						</div>
						<div class="f12">体验很好</div>
					</div>
					<div class="ll2">
						<div class="f14">{{ info.reservations }}人预定</div>
						<div class="f14">{{ info.views }}浏览</div>
					</div>
				</div>
				<div class="line"></div>
				<div class="flexB">
					<div class="f14">{{ info.stadiumAddr }}</div>
					<div @click="openMap">
						<uni-icons type="location-filled" color="#4062c5" size="30"></uni-icons>
					</div>
				</div>
				<div class="line"></div>
				<div class="c80 mb10"><span class="dot"></span>温馨提示：具体场地球馆可能会根据实际情况调整。</div>
				<div class="c80" style="text-align: right;" @click="openBi">订场必读></div>
			</div>
			<div class="ibox" v-if="tcList.length">
				<div>更多省钱套餐</div>
				<div class="card" @click="ydCard(i)" v-for="i in tcList" :key="i.id">
					<div class="cN">{{ i.cardTypeName }}</div>
					<div class="cP">¥{{ i.price }}</div>
				</div>
			</div>

			<div class="ibox mb10">
				<div class="flexB">
					<div>{{ info.stadiumName }}</div>
					<div class="c80">{{ time }}前有人预定</div>
				</div>
				<view class="flex" style="overflow: auto;">
					<view @click="openYd(i)" v-for="i in list" :key="i.date" class="yd">
						<view>{{ i.week }}</view>
						<view style="margin: 10rpx 0;">{{ i.date.match(/\d{4}-(\d{2}-\d{2})/)[1] }}</view>
						<view class="ii">预定</view>
					</view>
				</view>
			</div>

			<!-- <div class="ibox">
				<div class="flexB ac">
					<div>评论({{ num }})</div>
					<div v-if="isToken" class="f14 theme flex ac" @click="$refs.cc.open('bottom')">
						<uni-icons type="chat" color="#3a5cc6" size="20"></uni-icons>
						写点评
					</div>
				</div>
				<div v-for="i in slist" :key="i.id">
					<div class="flexB">
						<div>{{ i.evaluateUser }}</div>
						<div class="c80">{{ i.evaluateTime }}</div>
					</div>
					<div style="margin: 20rpx 0; color: #999">{{ i.evaluateContent }}</div>
					<div v-if="i.pics && i.pics.length" class="flexB">
						<image mode="aspectFit" v-for="(ii, idx) in i.pics" :key="ii" @click="viewImg(i.pics, idx)"  style="width: 200rpx; height: 200rpx; border: 1rpx solid #ccc; border-radius: 8px;" :src="base + ii"></image>
					</div>
				</div>
				<view v-if="!slist.length" class="kong">暂无评论</view>
				<div v-else>
					<view v-if="slist.length!=num" class="last">正在加载</view>
					<view v-else class="last">没有更多了</view>
				</div>
			</div> -->
		</div>
		<uni-popup type="bottom" ref="popup" background-color="#fff">
			<view class="p10">
				<div class="mb10 theme c">订场必读</div>
				<div class="line"></div>
				<div class="f12 theme tt">温馨提示</div>
				<div class="c80 mtb10">具体场地球馆可能会根据实际情况调整。</div>
				<div class="f12 theme tt">退改规则</div>
				<div class="c80 mtb10">退款规则：提前3小时均可退改场地</div>
				<div class="f12 theme tt">入场运动安全须知</div>
				<div class="c80">1、患有高血压、心脏病、特殊遗传病、身体机能缺陷等人群，不建议运动，强行运动者，后果自负</div>
				<div class="c80">2、在进行运动前需做好充分热身，活动关节肌肉，激活身体机能状态，并观察自我身体情况</div>
				<div class="c80">3、严禁酒后进入场馆运动</div>
				<div class="c80">4、严禁自行车、儿童车、滑板车等进入体育场内，严禁在场内放无人机等</div>
				<div class="c80">5、严禁攀爬护栏、踩踏座椅、随意移动器械等扰乱场内管理秩序的行为</div>
				<div class="c80">6、严禁携带宠物、有腐蚀作用的饮料或危险违禁品入场，严禁堵塞体育场内外安全通道</div>
				<div class="c80">7、严禁打架斗殴等，由此造成伤害的，场馆概不负责</div>
				<div class="c80">8、严禁开展不健康或非法活动，对违反治安管理条例者，将移送公安机关依法处理</div>
				<div class="c80">9、请在进场前更换适宜的运动鞋，严禁穿高跟鞋、钢钉鞋、旱冰鞋、滑板鞋进入运动场地</div>
				<div class="c80">10、儿童入场需由成人看护，避免发生意外，凡违反规定不听劝阻造成意外的，由监护人或受托监护人承担全部责任</div>
				<div class="c80">11、凡进入场馆的人员被视作已详细阅读本须知，并已同意和接受本须知的全部内容。感谢您对我们工作的支持，愿您在这里度过一段美好时光</div>
				<div class="c80">如有身体不适，请尽快联系前台或拨打120</div>
				<div class="c80">前台电话：13330075971</div>
				<div class="c80">谢谢配合</div>
			</view>
		</uni-popup>
		<uni-popup type="bottom" ref="cc" background-color="#fff">
			<view class="p10 mt10">
				<div class="flex ac"><span>请打分：</span><uni-rate size="40" v-model="score" /><span style="margin-left: 10px;">{{ score }}分</span></div>
				<textarea @blur="e=>ptext = e.detail.value.trim()" :cursor-spacing="80" v-model="ptext" placeholder="(必填)请输入文字点评"
					style="width: 100%; box-sizing: border-box; height: 8rem; padding: 10rpx; margin-top: 10px; border: 1px solid #eee; border-radius: 4px;"></textarea>
				<uni-file-picker ref="files" @select="select" :sizeType="['compressed']" limit="3"
					title="(可选)最多选择3张图片"></uni-file-picker>
				<div class="btn" @click="comment">提交</div>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isToken: uni.getStorageSync('token'),
			score: 0,
			info: {},
			time: '',
			files: [],
			tagArr: [],
			num: 0,
			ptext: '',
			pObj: {},
			list: [],
			slist: [],
			imgList: [],
			tcList: [],
			page: 1,
			base: this.$base,
			tags: ['退款', '改签', 'wifi', '充电宝']
		}
	},
	async onLoad(i) {		
		this.pObj = i;
		await this.getInfo();
		this.getList();
		this.sayList();
	},
	/** 加载评论 */
	onReachBottom() {
		setTimeout(()=>this.loadmore(), 1000)
	},
	methods: {
		loadmore() {
			if(this.slist.length == this.num || this.loading) return;
			this.page += 1;
			this.sayList();
		},
		getInfo() {
			this.$request({
				url: '/tStadium/queryIntroduce',
				method: 'get',
				data: {
					stadiumId: this.pObj.id
				}
			}).then(res => {
				this.tagArr = res.data.tags || []
				this.info = res.data.ifno
			});

			this.$request({
				url: '/tStadium/queryDetail',
				method: 'get',
				data: {
					stadiumId: this.pObj.id
				}
			}).then(res => {
				this.imgList = res.data.pics.map(i=>i.path) || []
				this.tags = res.data?.tags[0]?.tag.split(',') || []
			});
		},
		viewImg(arr, idx) {
			if(arr.length==0) return this.$msg('暂无图片');
			uni.previewImage({
				current: idx,
				urls: arr.map(ix=>this.$base + ix)
			})
		},
		select(file) {
			this.files = file;
		},
		ydCard(i) {
			if(!this.isToken) return;
			this.$request({
				url: '/tStadium/reserveStadiumCard',
				data: {
					stadiumId: i.stadiumId,
					cardId: i.id
				}
			}).then(res => {
				let no = res.data.pickNo;
				uni.navigateTo({
					url: `/pages/prePay?no=${no}`
				});
			});
		},
		upImgs(file) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: this.$base + '/attach/upload',
					header: { Authorization: uni.getStorageSync("token") || "" },
					filePath: file,
					name: 'file',
					success: (res) => {
						let id = JSON.parse(res.data).data.id;
						resolve(id);
					},
					fail: (err) => {
						// 上传失败，传递错误信息
						this.$msg('图片上传失败')
						reject(new Error('上传失败: ' + err));
					},
				});
			})

		},
		async comment() {			
			await this.$nextTick(); // 等待DOM更新完成
			this.ptext = this.ptext.trim(); // 去除空格
			if(!this.ptext) return this.$msg('请输入文字点评');
			let imgs = [];
			if (this.files?.tempFilePaths?.length) {
				uni.showLoading({title: '图片上传中...', mask: true});
				const promises = this.files.tempFilePaths.map(i => this.upImgs(i));
				imgs = await Promise.all(promises);
				uni.hideLoading();
			}
			await this.$request({
				url: '/evaluate/add',
				data: {
					stadiumId: this.pObj.id,
					attachIds: imgs || [],
					score: this.score,
					evaluateContent: this.ptext
				}
			}).then(res => {
				this.$refs.files.clearFiles();
				this.files = [];
				this.ptext = '';
				this.$refs.cc.close();
				this.$msg('点评成功，管理员审核通过可查看');
				// setTimeout(() => this.sayList(), 1000)
			})

		},
		openBi() {
			this.$refs.popup.open('bottom');
		},
		openYd(i) {
			if(!this.isToken) return this.$msg('该功能登录才能查看')
			i.pid = this.pObj.id;
			i.name = this.info.stadiumName
			uni.navigateTo({
				url: `/pages/preOrder?obj=${JSON.stringify(i)}&time=${JSON.stringify(this.list)}`
			});
		},
		openMap() {
			uni.openLocation({
				name: this.info.stadiumAddr || '',
				latitude: this.info.latitude * 1,
				longitude: this.info.longitude * 1,
				success: function () {
					console.log('success');
				},
				fail: (err) => {
					console.log(err);
				}
			});
			// uni.navigateTo({
			// 	url: `/pages/map?obj=${JSON.stringify(this.info)}`
			// });
		},
		viewItem() {
			uni.navigateTo({
				url: `/pages/notice?tagArr=${JSON.stringify(this.tagArr)}&name=${this.info.stadiumName}`
			});
		},
		getList() {
			this.$request({
				url: '/tStadium/queryStadiumCardPrice',
				method: 'get',
				data: {
					stadiumId: this.pObj.id
				}
			}).then(res => {
				this.tcList = res.data || [];
			});

			this.$request({
				url: '/tStadium/queryReserveList',
				method: 'get',
				data: {
					stadiumId: this.pObj.id
				}
			}).then(res => {
				this.time = res.data.latestReserveTime;
				this.list = res.data.dateInfoList || [];
			})
		},
		sayList() {
			this.loading = true;
			this.$request({
				url: '/evaluate/queryListPage',
				method: 'get',
				data: {
					pageNum: this.page,
					pageSize: 10,
					stadiumId: this.pObj.id
				}
			}).then(res => {
				this.num = res.data.total || 0;
				this.slist = this.slist.concat(res.data.list || []);
				this.loading = false;
			})
		}

	}
}
</script>

<style lang="scss">
.card {
	display: inline-block;
	padding: 20rpx;
	width: 23%;
	margin-right: 10rpx;
	margin-top: 10rpx;
	border-radius: 20rpx;
	background: linear-gradient(to bottom, #fdf3d8 0%, #f9d87c 100%);
}
.card:last-child {
	margin-right: 0;
}
.cN {
	color: #936100;
	font-weight: bold;
	font-size: 30rpx;
}
.cP {
	color: #D30000;
	font-size: 28rpx;
}
.btn {
	margin: 10px auto 0;
	text-align: center;
	width: 88px;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	background: $theme;
	color: #fff;
}

.tt::before {
	display: inline-block;
	content: '';
	width: 6rpx;
	height: 20rpx;
	margin-right: 10rpx;
	background: $theme;
	border-radius: 5rpx;
}

.yd {
	// min-width: 90rpx;
	text-align: center;
	color: #fff;
	padding: 18rpx 20rpx;
	font-size: 30rpx;
	margin: 20rpx 16rpx 0;
	border-radius: 20rpx;
	background: linear-gradient(180deg, #2655CA 0%, #4A72D5 50%, #D5E0FB 100%);
}

.ii {
	display: inline-block;
	background: #fff;
	border-radius: 20rpx;
	color: #2655CA;
	font-size: 28rpx;
	padding: 4rpx 20rpx;
}

.dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #808080;
	vertical-align: middle;
	margin-right: 8px;
}

.pf {
	display: inline-block;
	padding: 0px 2px;
	text-align: center;
	background: #fff;
	border-radius: 18px;
	width: 30px;
	color: #4062c5;
	font-size: 12px;
	margin-right: 4px;
}

.ll1 {
	color: #fff;
	width: 59%;
	padding: 10px;
	border-radius: 8px;
	background: linear-gradient(to right, #2655CA 0%, #4A72D5 50%, #D5E0FB 100%);
}

.ll2 {
	color: #fff;
	width: 38%;
	padding: 10px;
	border-radius: 8px;
	background: linear-gradient(to right, #8fdb7e 0%, #a1d495 50%, #c8dec3 100%);

}

.bg {
	width: 100%;
	height: 40vh;
	position: absolute;
	top: 0;
}
.bg::before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
}

.bb {
	position: relative;
	margin-top: 15vh;
	margin-bottom: 10px;
	padding: 2px 8px;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 10px;
}
</style>